<script lang="ts">
import { AppBarProps } from '@varlet/ui';
import { PropType, defineComponent, inject } from 'vue';

export default defineComponent({
  props: {
    title: {
      type: String as PropType<AppBarProps['title']>,
      default: () => inject<string>('organizer', '海淀区') + '信息学竞赛报名系统',
    },
    titlePosition: {
      type: String as PropType<AppBarProps['titlePosition']>,
      default: 'center',
    },
    student: { type: Object },
    person: { type: Function },
  },
});
</script>

<script setup lang="ts">
// 你可以直接使用 props
</script>

<template>
  <var-app-bar safe-area-top fixed :z-index="100" :title="title" :title-position="titlePosition">
    <template #left>
      <slot name="left" :student="student" :person="person" />
    </template>

    <template #right>
      <var-space class="pr-[8px]" :size="[0, '1.4vmin']">
        <slot name="right" />
      </var-space>
    </template>

    <template #content>
      <slot name="content" />
    </template>
  </var-app-bar>
</template>
